<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>HTTP | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="HTTP1.HTTP为什么重要 HTTP 是前后端合作的重要方式99%的需求都是通过 HTTP 做到，小部分需求可以通过 WebSockets 做到。 HTTP 能帮你从本质上理解 HTML、CSS、JS、图片、JSON、JSONP 等不同形式的资源 Web 性能优化基本等价于对 HTTP 传输效率优化 前端工程化需要你对 HTTP 缓存有深入了解  2.什么是HTTP####1.四个概念  se">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="HTTP">
<meta property="og:url" content="https://storm4542.github.io/archives/a1ede006.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="HTTP1.HTTP为什么重要 HTTP 是前后端合作的重要方式99%的需求都是通过 HTTP 做到，小部分需求可以通过 WebSockets 做到。 HTTP 能帮你从本质上理解 HTML、CSS、JS、图片、JSON、JSONP 等不同形式的资源 Web 性能优化基本等价于对 HTTP 传输效率优化 前端工程化需要你对 HTTP 缓存有深入了解  2.什么是HTTP####1.四个概念  se">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-25T09:08:27.160Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HTTP">
<meta name="twitter:description" content="HTTP1.HTTP为什么重要 HTTP 是前后端合作的重要方式99%的需求都是通过 HTTP 做到，小部分需求可以通过 WebSockets 做到。 HTTP 能帮你从本质上理解 HTML、CSS、JS、图片、JSON、JSONP 等不同形式的资源 Web 性能优化基本等价于对 HTTP 传输效率优化 前端工程化需要你对 HTTP 缓存有深入了解  2.什么是HTTP####1.四个概念  se">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-Http" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      HTTP
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h2><h3 id="1-HTTP为什么重要"><a href="#1-HTTP为什么重要" class="headerlink" title="1.HTTP为什么重要"></a>1.HTTP为什么重要</h3><ol>
<li>HTTP 是前后端合作的重要方式<br>99%的需求都是通过 HTTP 做到，小部分需求可以通过 WebSockets 做到。</li>
<li>HTTP 能帮你从本质上理解 HTML、CSS、JS、图片、JSON、JSONP 等不同形式的资源</li>
<li>Web 性能优化基本等价于对 HTTP 传输效率优化</li>
<li>前端工程化需要你对 HTTP 缓存有深入了解</li>
</ol>
<h3 id="2-什么是HTTP"><a href="#2-什么是HTTP" class="headerlink" title="2.什么是HTTP"></a>2.什么是HTTP</h3><p>####1.四个概念</p>
<ol>
<li>server</li>
<li>client</li>
<li>request</li>
<li>response</li>
</ol>
<ul>
<li><p>server</p>
<p>服务器端</p>
</li>
<li><p>client</p>
<p>客户端</p>
</li>
</ul>
<h4 id="2-request-请求"><a href="#2-request-请求" class="headerlink" title="2.request 请求"></a>2.request 请求</h4><p>请求包含四个部分</p>
<ol>
<li><p>动词  路径  协议/版本号  — GET ./style.css  HTTP/1.1</p>
</li>
<li><p>一些 key : value ，用回车分割</p>
<p>Host : xxx.xxx.xxx</p>
<p>Connection : keep-alive</p>
<p>Content-Type : application/javascript</p>
<p>User-Agent : xxxxxxxxxxx</p>
<p>Accept : xxxxx</p>
</li>
<li><p>回车，作用：分割第二部分和第三部分</p>
</li>
<li><p>什么都行，但是内容的格式必须要在第二部分的 <code>Content-Type</code>中声明</p>
</li>
</ol>
<h4 id="3-response-响应"><a href="#3-response-响应" class="headerlink" title="3.response 响应"></a>3.response 响应</h4><p>响应也包含四个部分</p>
<ol>
<li>协议/版本号 状态码 状态信息  HTTP/1.1 200 OK</li>
<li>一些 key : value ，用回车分割</li>
<li>回车，作用：分割第二部分和第三部分</li>
<li>什么都行，但是内容的格式必须要在第二部分的 <code>Content-Type</code>中声明</li>
</ol>
<h3 id="3-HTML-CSS-JS-JSON-JSONP都是什么？"><a href="#3-HTML-CSS-JS-JSON-JSONP都是什么？" class="headerlink" title="3.HTML,CSS,JS,JSON,JSONP都是什么？"></a>3.HTML,CSS,JS,JSON,JSONP都是什么？</h3><h4 id="1-HTML，CSS，JS的本质"><a href="#1-HTML，CSS，JS的本质" class="headerlink" title="1.HTML，CSS，JS的本质"></a>1.HTML，CSS，JS的本质</h4><p>本质是字符串，只是 <code>Content-Type</code>不同</p>
<ul>
<li>HTML  Content-Type : text/html</li>
<li>CSS      Content-Type : text/css</li>
<li>JS          Content-Type : application/javascript</li>
</ul>
<p>注意 url 里的后缀是废话，毫无意义。</p>
<ol>
<li>浏览器通过地址栏、iframe 来请求 HTML</li>
<li>浏览器通过 link 标签获取 CSS，然后渲染</li>
<li>浏览器通过 script 标签获取 JS，然后执行</li>
<li>浏览器通过 image 标签获取图片，然后展示</li>
</ol>
<h4 id="2-JSON"><a href="#2-JSON" class="headerlink" title="2.JSON"></a>2.JSON</h4><p>json也是字符串</p>
<p>JSON Content-Type : application/json</p>
<h4 id="3-JSONP"><a href="#3-JSONP" class="headerlink" title="3.JSONP"></a>3.JSONP</h4><p>本质就是字符串，只不过</p>
<ol>
<li>Content-Type 为application/javascript 或者 text/javascript</li>
<li>内容格式为 <code>functionName( {&quot;format&quot;: &quot;JSON&quot;} )</code></li>
</ol>
<h3 id="4-缓存"><a href="#4-缓存" class="headerlink" title="4.缓存"></a>4.缓存</h3><ol>
<li>使用 Cache-Control 缓存是常用的缓存方式</li>
<li>想要更新缓存只需稍微变更一下 url<ol>
<li>app-2131312362387123.js</li>
<li>app.js?v=1</li>
<li>app.js?t=201801012334</li>
<li>不要缓存入口页面，这是你更新资源的唯一入口</li>
</ol>
</li>
</ol>
<p><strong>并不是缓存</strong></p>
<p>Etag 和 304 会避免下载，但是还是会发出请求，并不属于缓存</p>
<h3 id="5-Cookie-和-Session"><a href="#5-Cookie-和-Session" class="headerlink" title="5.Cookie 和 Session"></a>5.Cookie 和 Session</h3><h4 id="1-Cookie"><a href="#1-Cookie" class="headerlink" title="1.Cookie"></a>1.Cookie</h4><p>因为HTTP协议是 <strong>无状态</strong> 的，通俗来说是 <strong>没脑子</strong>，它没有记忆。</p>
<p>假如用户登录成功后，刷新页面，用户的登录状态就没有了，这里可以用 Cookie 解决。</p>
<p><strong>保存登录状态</strong></p>
<p>jack登录a.com发出请求 uername:jack ; password : 123 —-&gt;  </p>
<p>后台接收到数据，账号密码正确，发出响应，响应头<code>header</code>写上<code>&#39;Set-Cookie&#39;,&#39;login = jack&#39;</code>—–&gt;</p>
<p>浏览器收到响应，种上 Cookie  —-&gt;</p>
<p>当jack再次访问a.com的其他页面时候，请求头中会带上<code>Cookie : login=jack</code>——&gt;</p>
<p>jack发现他还是登录状态，非常高兴 : ) —– end</p>
<p><strong>区分用户</strong></p>
<p>frank 这时候也登录 a.com 这时候他获得的 响应头就是<code>&#39;Set-Cookie&#39;,&#39;login = frank&#39;</code>了，这样我们也能区分jack 和 frank 了</p>
<p>但是<code>Cookie</code>有一个很不安全的地方，任何一个前端都可以使用<code>document.cookie = xxx</code>来伪造。</p>
<p><strong>我们需要一个方法既需要能标识用户，又可以防止前端伪造</strong></p>
<h4 id="2-Session"><a href="#2-Session" class="headerlink" title="2.Session"></a>2.Session</h4><p>因为<code>Cookie</code>不安全，所以出现了<code>Session</code>。</p>
<p><code>Session</code>是存在数据库的，因此前端无法修改。</p>
<p><strong>流程</strong></p>
<p>用户输入账户密码登录 ——&gt;  发送请求 ———&gt; 服务器验证账户密码正确———&gt; </p>
<p><strong>分配一个<code>session</code>，通过<code>cookie</code>告诉浏览器</strong>———&gt;<code>Set-Cookie,sessionId = &#39;xxxxxxxxxxxxx&#39;</code></p>
<p>剩下的就是和<code>Cookie</code>一样了。</p>
<h4 id="3-两者不同"><a href="#3-两者不同" class="headerlink" title="3.两者不同"></a>3.两者不同</h4><ol>
<li>使用时间：用Cookie分辨两个不同的用户，用Session存放用户的敏感数据。</li>
<li>实现方式：Cookie使用Set-Cookie实现，Session你想怎么实现就怎么实现。</li>
<li>存放方式：Cookie存放在浏览器里，Session存在服务器端的文件，数据库，内存等等。</li>
<li>两者关系：Session一般基于Cookie，存在里面。但也可以放到 localStorage 里面，放到 URL 里等等</li>
</ol>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="3404a532.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          重构
        
      </div>
    </a>
  
  
    <a href="6a317f77.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">Vue 动画</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/a1ede006.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
